<template>
  <!-- 最外层只能有一个组件，不能出现多个 -->
  <div class="userComp-uploadCompDemo">
      <div class="author-demo">
          <div>作者：黄彪</div>
          <div>日期：2017/11/02</div>
      </div>
    <Button type="primary" @click="showModalAction('JHYXM')">显示上传组件</Button>


      <div style="margin-bottom: 10px;">
          <div style="float:left;width: 500px;overflow: auto;border: 1px solid #eee;">
              <upload-file
                  :serverUrl = "serverUrl"
                  :businessCode = "businessCode"
                  v-model="modalSwitch"
              ></upload-file>
          </div>
          <div style="margin-left: 520px;">
              <Button type="primary" @click="showCodeAction">显示代码</Button>
          </div>
          <div style="clear: both"></div>
      </div>

      <div>
          <!-- 显示HTML代码 -->
          <pre v-show="isShowCode">
                <code class="html" v-text="htmlCode">
                </code>
            </pre>
          <!-- 显示JavaScript代码 -->
          <pre v-show="isShowCode">
                <code class="javascript"  v-text="jsCode">
                </code>
            </pre>
      </div>

      <!-- 文档说明 -->
      <div class="api">
          <div class="anchor">
              <h2 >props </h2>
          </div>
          <div class="anchor">
              <h3>属性说明</h3>
          </div>
          <table>
              <thead>
              <tr>
                  <th>属性值</th>
                  <th>说明</th>
                  <th>参数</th>
                  <th>返回值</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>serverUrl</td>
                  <td>上传文件和与后台服务器地址（网关地址）</td>
                  <td></td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>businessCode</td>
                  <td>业务编码（缺点上传文件的逻辑）</td>
                  <td></td>
                  <td>
                      无
                  </td>
              </tr>

              <tr>
                  <td>v-model</td>
                  <td>显示节点的开关</td>
                  <td></td>
                  <td>
                      无
                  </td>
              </tr>

              </tbody>
          </table>

      </div>
  </div>
</template>

<script>
    import hljs from 'highlight.js'

export default {
    mounted: function () {
        window.setTimeout(function () {
            $('.userComp-uploadCompDemo pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }, 100);
    },
    data: function () {
      return {
          // 是否显示代码
          isShowCode:false,
          // 业务码
          businessCode:"",
          // 是否显示模态框的开关
          modalSwitch: false,
          // server URL
         //serverUrl: 'http://192.168.18.34:80',
         serverUrl: 'http://192.168.10.202:4444/gateway/api-pd',
          htmlCode:'<upload-file\n' +
          '          :serverUrl = "serverUrl"\n' +
          '          :businessCode = "businessCode"\n' +
          '          v-model="modalSwitch"\n' +
          '      ></upload-file>',
          jsCode:'export default {\n' +
          '    data: function () {\n' +
          '        return {\n' +
          '            // 业务码\n' +
          '            businessCode:"",\n' +
          '            // 是否显示模态框的开关\n' +
          '            modalSwitch: false,\n' +
          '            // server URL\n' +
          '//          serverUrl: \'http://192.168.18.34:80\'\n' +
          '            serverUrl: \'http://192.168.10.202:4444/gateway/api-ms\',\n' +
          '        };\n' +
          '    },\n' +
          '    methods: {\n' +
          '        showModalAction: function (businessCode) {\n' +
          '            // 修改业务码\n' +
          '            this.businessCode = businessCode;\n' +
          '            // 显示模态框\n' +
          '            this.modalSwitch = true;\n' +
          '        },\n' +
          '    }\n' +
          '}',
      };
    },
    methods: {
        // 显示代码
        showCodeAction: function (){
            this.isShowCode = !this.isShowCode;
        },
        showModalAction: function (businessCode) {
            // 修改业务码
            this.businessCode = businessCode;
            // 显示模态框
            this.modalSwitch = true;
        },
    }
  }

</script>

<style scoped lang="scss">
    /***
       scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
       lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
       ***/
    .userComp-uploadCompDemo {
        .api table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
